<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/food.css" rel="stylesheet">
    <title>订单信息</title>
</head>
<body>
<div class="main">
    <div class="back_btn" onclick="history.go(-1);"></div>
    <!-- 标题 -->
    <div class="header">订单信息</div>

    <!-- 主体区域 -->
    <div class="main_up container-fluid padding_top_40 padding_bottom_0">
        <div class="row order_info_nav">
            <div class="col-xs-6 active" id="order_statu">订单状态</div>
            <div class="col-xs-6 " id="order_detail">订单详情</div>
        </div>

        <!----------------------------- 订单状态 start----------------------------->
        <div class="order_statu">
            <div class="container-fluid list padding_lr_12 full_height">

                <div class="row statu margin_top_22 ">
                    <div class="statu_left pull-left">
                        <div class="ic_img"></div>
                    </div>
                    <div class="statu_right pull-left padding_left_12">
                        <div>
                            订单已提交<span>（今天 10：21）</span>
                        </div>
                        <div class="small_aa_font margin_top_10">
                            请耐心等待商家确认哦
                        </div>
                    </div>
                </div>

                <div class="row statu ">
                    <div class="statu_left pull-left">
                        <div class="ic_img"></div>
                    </div>
                    <div class="statu_right pull-left padding_left_12">
                        <div>
                            商家已接单<span>（今天 12：21）</span>
                        </div>
                        <div class="small_aa_font margin_top_10">
                            商品准备中
                        </div>
                    </div>
                </div>

                <div class="row statu  ">
                    <div class="statu_left pull-left">
                        <div class="ic_img"></div>
                    </div>
                    <div class="statu_right pull-left padding_left_12">
                        <div>
                            商家已出货<span>（今天 14：21）</span>
                        </div>
                        <div class="small_aa_font margin_top_10">
                            商品正在配送，按照约定的时间地点不见不散哦
                        </div>
                    </div>
                </div>

                <div class="row statu ">
                    <div class="statu_left pull-left">
                        <div class="ic_img"></div>
                    </div>
                    <!-- 订单完成 start-->
                    <div class="order_finished statu_right pull-left padding_left_12 hidden">
                        <div>
                            订单完成<span>（5月6日 09:00）</span>
                        </div>
                        <div class="small_aa_font margin_top_10">

                        </div>
                    </div>
                    <!-- 订单完成 end-->

                    <!-- 订单结束 start-->
                    <div class="order_over statu_right pull-left padding_left_12 ">
                        <div class="mid_ff5d5b_font">
                            订单结束 <span>（5月6日 09:00）</span>
                        </div>
                        <div class="small_ff5d5b_font margin_top_5 line_height_22">
                            未能如期领取订单，系统判断你有爽约责任。提醒你近3单再次爽约会被禁止下单一个月。
                        </div>
                    </div>
                    <!-- 订单结束 end-->
                </div>

            </div>

            <!-- 竖线 -->
            <div class="vertical"></div>
            <!-- 提示 -->
            <div class="order_tips">
                <div class="height_30 tips_text">
                    提示：取货时，打开取货凭证给工作人员扫一扫！
                </div>
                <!-- 取货时间 -->
                <div class="height_30 tips_time small_aa_font">
                    取货时间 周五 11:30-12:30；17:00-18:00
                </div>
            </div>

            <!-- 取消订单按钮 -->
            <div class="btn_warp ">
                <div class="submit hidden">取消订单</div>
                <a href="comment.html">
                    <div class="submit hidden">评价</div>
                </a>

                <div class="submit">取货凭证</div>
            </div>

        </div>
        <!----------------------------- 订单状态 end------------------------------->

        <!----------------------------- 订单详情 start----------------------------->
        <div class="order_detail hidden">
            <div class="div_gap"></div>
            <div class="container-fluid goods_list list padding_lr_12 ">
                <div class="row goods_font">
                    <div class="col-xs-7">香酥鸡腿</div>
                    <div class="col-xs-5 goods_info">
                        <!-- 数量 -->
                        <span class="goods_count ">x 2</span>
                        <span class="goods_price price_font">¥ 15</span>
                    </div>

                </div>
                <div class="amount row">
                    <span class="amount_text">总计</span> ¥ <span class="amount_num">30</span>
                </div>
            </div>
            <div class="div_gap"></div>
            <!-- ----------评价--------- -->
            <div class="container-fluid list padding_lr_12 comments padding_bottom_0">
                <div class="row userinfo">
                    <!-- 头像 -->
                    <div class="pic ">
                        <img src="../imgs/2.jpg" alt=""/>
                    </div>
                    <div class="comment">
                        <div class="row">
                            <div class="col-xs-6 username">Aaron</div>
                            <!-- 时间 -->
                            <div class="comment_time col-xs-6">2016.05.03</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="comment padding_left0 line_height_22">
                        <div class="row">
                            <!-- 赞 或者 踩 -->
                            <div class="middle_blue_font padding_lr_0 pull-left">赞</div>
                            <!-- 时间 -->
                            <div class="middle_gray_font margin_l_23">香酥鸡腿</div>
                        </div>
                        <!-- 评论内容 -->
                        <div class="row ">
                            <div class="comment_content middle_black_font padding_0">
                                默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价默认评价
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- -----------配送信息----------- -->
            <div class="container-fluid list padding_lr_12 order_info_address">
                <div class="row order_info_address_title middle_666666_font height_33">配送信息</div>
                <div class="row order_info_address_user middle_666666_font  height_50">
                    <div class="username pull-left">Aaron 科技</div>
                    <div class="pull-right middle_8e_font">
                        <span class="employId">021100500X</span>&nbsp;
                        <span class="mobile">15855198587</span>
                    </div>
                </div>
                <div class="row order_info_address_addr middle_666666_font height_67 line_height_22">
                    <div class="height_auto">取餐地址</div>
                    <div class="middle_gray_font height_auto">科技园副食窗口</div>
                </div>
                <div class="row order_info_address_time middle_666666_font height_67 line_height_22">
                    <div class="height_auto">取餐时间</div>
                    <div class="middle_gray_font height_auto">周五（11：30-12：30，17：00-18：00）</div>
                </div>

            </div>
        </div>
        <!----------------------------- 订单详情 end------------------------------->
    </div>

    <!-------------------------- 取货凭证 二维码弹出框 start-------------------------->
    <div class="bg_cover z_index_100 hidden">
        <div class="qcode_pop padding_14">
            <div class="padding_14 small_88_font line_height_12">取货号</div>
            <div class="qh_num">0098</div>
            <div class="qcode_pop_bottom">
                <div>
                    <div class="qcode_pop_img">
                        <img src="../imgs/ewm.png" alt=""/>
                    </div>
                    <div class="small_88_font line_height_12 margin_top_17">
                        <div>取货时，请将取货号、二维码</div>
                        <div class="margin_top_6">出示给工作人员</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-------------------------- 取货凭证 二维码弹出框 end-------------------------->

    <!-- 弹出层模板 -->
    <div class="alert_popover">
        <div class="confirm_popover">
            <div class="row">
                你确定取消订单吗?
            </div>
            <div class="row">
                <div class="col-xs-6 cancel">取消</div>
                <div class="col-xs-6 confirm">确定</div>
            </div>
        </div>
    </div>
</div>
<script src="../js/commen/qrcode.js"></script>
<script>
    window.onload = function () {
        // 订单状态
        getElements("#order_statu")[0].onclick = function () {
            addClass(getElements(".order_detail")[0], "hidden");
            removeClass(getElements(".order_statu")[0], "hidden");
            addClass(this, "active");
            removeClass(getElements("#order_detail")[0], "active");
        };
        // 订单详情
        getElements("#order_detail")[0].onclick = function () {
            addClass(getElements(".order_statu")[0], "hidden");
            removeClass(getElements(".order_detail")[0], "hidden");
            addClass(this, "active");
            removeClass(getElements("#order_statu")[0], "active");
        };
    };

    function hasClass(elements, cName) {
        return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)")); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
    }
    function addClass(elements, cName) {
        if (!hasClass(elements, cName)) {
            elements.className += " " + cName;
        }
    }
    function removeClass(elements, cName) {
        if (hasClass(elements, cName)) {
            elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " "); // replace方法是替换
        }
    }
    function getElements(selector) {
        var startWith = selector.substring(0, 1), dom = [];
        switch (startWith) {
            case "#":
                selector = selector.substring(1);
                dom.push(document.getElementById(selector));
                break;
            case ".":
                selector = selector.substring(1);
                dom = document.getElementsByClassName(selector);
                break;
            default :
                dom = document.getElementsByTagName(selector);
                break;
        }
        return dom;
    }
</script>
</body>
</html>